<template>
    <div class="article-detail-container">
        <!-- 面包屑导航 -->
        <div class="breadcrumb">
            <router-link to="/">首页</router-link> / 正文
        </div>

        <!-- 文章标题 -->
        <h1 class="article-title">{{ article.title }}</h1>

        <!-- 文章元信息（发布时间、分类、阅读量） -->
        <div class="article-meta">
            <span>
                <i class="el-icon-time"></i>
                发表于 {{ article.updateTime }}
            </span>
            <span>
                <i class="el-icon-folder"></i>
                分类于 {{ article.categoryName }}
            </span>
            <span>
                <i class="el-icon-view"></i>
                阅读量 {{ article.readNum }}
            </span>
        </div>

        <!-- 文章内容（支持HTML渲染） -->
        <div class="article-content" v-html="article.content"></div>

        <!-- 文章标签 -->
        <div class="article-tags">
            <span class="tag-item" v-for="(tag, index) in article.tags" :key="index"># {{ tag.name }}</span>
        </div>

        <!-- 下一篇文章导航 -->
        <div class="next-article" v-if="article.nextArticle">
            <router-link :to="{ name: 'ArticleDetail', params: { id: article.nextArticle.id } }">
                下一篇 > {{ article.nextArticle.title }}
            </router-link>
        </div>
    </div>
</template>

<script>
export default {
    name: 'ArticleDetail',
    data() {
        return {
            article: {} // 存储文章详情数据
        };
    },
    created() {
        this.fetchArticleDetail(); // 组件创建时请求文章详情
    },
    methods: {
        async fetchArticleDetail() {
            try {
                // 假设路由参数中包含文章ID（需确保路由配置传递id）
                const articleId = this.$route.params.id;
                const res = await this.$axios.post(
                    'http://47.104.167.34:9110/api/article/detail',
                    { articleId } // 传递接口要求的articleId参数
                );
                if (res.data.success) {
                    this.article = res.data.data; // 赋值文章详情数据
                } else {
                    this.$message.error('获取文章详情失败');
                }
            } catch (error) {
                this.$message.error('网络错误，获取文章详情失败');
                console.error(error);
            }
        }
    }
};
</script>

<style scoped>
/* 容器样式 */
.article-detail-container {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* 面包屑导航 */
.breadcrumb {
    margin-bottom: 20px;
    color: #666;
    font-size: 14px;
}

.breadcrumb a {
    color: #409eff;
    text-decoration: none;
}

/* 文章标题 */
.article-title {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 15px;
    color: #333;
}

/* 文章元信息 */
.article-meta {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    color: #999;
    font-size: 13px;
}

.article-meta i {
    margin-right: 5px;
}

/* 文章内容 */
.article-content {
    line-height: 1.8;
    margin-bottom: 20px;
    color: #333;
}

/* 文章标签 */
.article-tags {
    margin-bottom: 20px;
}

.tag-item {
    display: inline-block;
    padding: 2px 8px;
    background: #e6f7ff;
    color: #409eff;
    border-radius: 4px;
    font-size: 13px;
    margin-right: 8px;
}

/* 下一篇文章导航 */
.next-article {
    text-align: right;
    margin-top: 20px;
    padding-top: 10px;
    border-top: 1px solid #eee;
}

.next-article a {
    color: #409eff;
    text-decoration: none;
    font-size: 14px;
}
</style>